<template>
  <el-form label-width="auto">
    <el-form-item label="SPU名称">
      <el-input v-model="spuParam.spuName" style="width: 220px"></el-input>
    </el-form-item>

    <el-form-item label="SPU品牌">
      <el-select
        v-model="spuParam.tmId"
        style="width: 220px"
        placeholder="请选择"
      >
        <el-option
          v-for="trademark of allTrademark"
          :key="trademark.id"
          :label="trademark.tmName"
          :value="trademark.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="SPU描述">
      <el-input v-model="spuParam.description" type="textarea"></el-input>
    </el-form-item>
    <el-form-item label="SPU图标">
      <el-upload
        :before-upload="beforeUpload"
        :on-preview="handlePictureCardPreview"
        :file-list="imgList"
        action="/api/admin/product/fileUpload"
        list-type="picture-card"
      >
        <el-icon><Plus /></el-icon>
      </el-upload>

      <el-dialog v-model="dialogVisible">
        <img :src="previewUrl" w-full alt="Preview Image" />
      </el-dialog>
    </el-form-item>
    <el-form-item label="SPU销售属性">
      <el-select
        ref="selectComponent"
        v-model="spuSaleAttr.name"
        @change="handleChangeSelect($event)"
        style="width: 220px"
        placeholder="请选择"
      >
        <el-option
          v-for="saleAttr of saleAttrList"
          :key="saleAttr.id"
          :label="saleAttr.name"
          :value="saleAttr.name"
        />
      </el-select>
      <el-button
        @click="addAttrValue"
        style="margin-left: 15px"
        type="primary"
        icon="Plus"
      >
        添加属性值
      </el-button>
      <el-table :data="spuHasAllAttr">
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column
          width="130"
          label="销售属性名字"
          prop="saleAttrName"
        ></el-table-column>

        <el-table-column label="销售属性值">
          <template #="{ row, index }">
            <el-tag
              style="margin: 2px 10px"
              type="primary"
              v-for="item of row.spuSaleAttrValueList"
            >
              {{ item.saleAttrValueName }}
            </el-tag>
            <el-button
              @click="row.flag = true"
              v-if="!row.flag"
              type="primary"
              size="small"
              icon="Plus"
            ></el-button>
            <el-input
              @blur="confirmAttrValue(row)"
              v-if="row.flag"
              style="width: 120px"
              v-model="row.newValue"
              placeholder="输入属性值"
            ></el-input>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template #="{ row, index }">
            <el-button type="warning" icon="Delete" size="small"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button type="primary">保存</el-button>
      <el-button style="margin: 15px 10px" @click="onChangeSence()">
        取消
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { Scence } from '@/views/product/attr/type'
import { reactive, ref } from 'vue'
import {
  reqAllTrademark,
  reqImage,
  reqSaleAttrList,
  reqSpuHasAllAttr,
} from '@/api/product/spu'
import { ISpuData } from '@/api/product/spu/type'
import { ElMessage } from 'element-plus'
let emits = defineEmits(['changeSence'])
let allTrademark = ref([])
let imgList = ref([])
let saleAttrList = ref([])
let spuHasAllAttr = ref([])
let dialogVisible = ref(false)
let spuSaleAttr = ref({
  name: '',
  id: '',
})
let selectComponent = ref()
let spuParam = ref<ISpuData>({
  category3Id: '',
  spuName: '',
  tmId: '',
  description: '',
  spuImageList: [],
  spuSaleAttrList: [],
})
let previewUrl = ref<string>('')
const onChangeSence = () => {
  emits('changeSence', Scence.read)
}
const handleChangeSelect = (e) => {
  console.log(e)
  console.log(selectComponent.value)
  // spuSaleAttr.value.name=  selectComponent.value.selectedLabel;
}
const init = async (data) => {
  spuParam.value = data
  console.log('----------', data)

  try {
    let result = await reqAllTrademark()
    allTrademark.value = result.data
    imgList.value = (await reqImage(data.id)).data.map((item) => {
      return {
        name: item.imgName,
        url: item.imgUrl,
      }
    })
    saleAttrList.value = (await reqSaleAttrList()).data
    spuHasAllAttr.value = (await reqSpuHasAllAttr(data.id)).data.map((item) => {
      return { ...item, flag: false, newValue: '' }
    })
  } catch (error) {
    console.log(error)
  }
}
const handlePictureCardPreview = (file) => {
  dialogVisible.value = true
  previewUrl.value = file.url
}

const beforeUpload = (rawFile) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type != 'image/png') {
    ElMessage.error('必须为图片')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片大小不能超过2MB!')
    return false
  }
  return true
}
const confirmAttrValue = (row) => {
  if (!row.newValue.trim()) {
    ElMessage({
      type: 'error',
      message: '不能输入为空',
    })
    return
  }
  if (
    row.spuSaleAttrValueList.some(
      (item) => item.saleAttrValueName == row.newValue,
    )
  ) {
    row.newValue = ''
    ElMessage({
      type: 'warning',
      message: '已添加该属性',
    })
    return
  }
  row.flag = false
  row.spuSaleAttrValueList.push({ saleAttrValueName: row.newValue })
  row.newValue = ''
}
const clearSpuForm = () => {
  spuParam.value = {
    category3Id: '',
    spuName: '',
    tmId: '',
    description: '',
    spuImageList: [],
    spuSaleAttrList: [],
  }
}
const addSpu = async () => {
  clearSpuForm()
  try {
    let result = await reqAllTrademark()
    allTrademark.value = result.data
    saleAttrList.value = (await reqSaleAttrList()).data
  } catch (error) {
    console.log(error)
  }
}

const addAttrValue = () => {
  spuHasAllAttr.value.push({
    saleAttrName: spuSaleAttr.value.name,
    spuSaleAttrValueList: [],
  })
}
defineExpose({ init, addSpu })
</script>

<style scoped></style>
